<template>
  <div ref="chart" class="chart"></div>
</template>
<script>
import echarts from "@/lib/echarts";
import { getElementSize, getMax } from "@/lib/util";
export default {
  data() {
    return {
      chart: null, //echart图表对象
      dataArr: 0,
      max: 0,
      Ltype:1,
      colorSet: {
        color: "#e18c29",
      },
      angle: 0,
    };
  },
  mounted() {
    var that=this
    this. dataArr=this.info
    this.max=this.all
    this.colorSet.color=this.bgColor
    that.init();
    setInterval(function() {
        that.angle = that.angle+3
        that.init();
    }, 100);
  },
  watch: {
    info(newVal, oldVal) {
      this.dataArr = newVal;
      this.init();
    },
    all(newVal, oldVal) {
      this.max = newVal;
      this.init();
    },
  },
  props: ["info", "all", "bgColor"],
  methods: {
    init() {
      var that = this;
      that.chart = echarts.init(that.$refs.chart, false);

      let option = {
        title: {
          text: that.colorSet.color=="#e18c29"?"预警":"报警"  ,
          x: "center",
          y: "center",
          textStyle: {
                fontSize: 14,
                color: that.colorSet.color,
          },
        },
        series: [
          {
            name: "ring5",
            type: "custom",
            coordinateSystem: "none",
            renderItem: function (params, api) {
              return {
                type: "arc",
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.8,
                  startAngle: ((0 + that.angle) * Math.PI) / 180,
                  endAngle: ((90 + that.angle) * Math.PI) / 180,
                },
                style: {
                  stroke: that.colorSet.color,
                  fill: "transparent",
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: "ring5",
            type: "custom",
            coordinateSystem: "none",
            renderItem: function (params, api) {
              return {
                type: "arc",
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.8,
                  startAngle: ((180 +that.angle) * Math.PI) / 180,
                  endAngle: ((270 + that.angle) * Math.PI) / 180,
                },
                style: {
                  stroke: that.colorSet.color,
                  fill: "transparent",
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: "ring5",
            type: "custom",
            coordinateSystem: "none",
            renderItem: function (params, api) {
              return {
                type: "arc",
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85,
                  startAngle: ((270 + -that.angle) * Math.PI) / 180,
                  endAngle: ((40 + -that.angle) * Math.PI) / 180,
                },
                style: {
                  stroke: that.colorSet.color,
                  fill: "transparent",
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: "ring5",
            type: "custom",
            coordinateSystem: "none",
            renderItem: function (params, api) {
              return {
                type: "arc",
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85,
                  startAngle: ((90 + -that.angle) * Math.PI) / 180,
                  endAngle: ((220 + -that.angle) * Math.PI) / 180,
                },
                style: {
                  stroke: that.colorSet.color,
                  fill: "transparent",
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: "ring5",
            type: "custom",
            coordinateSystem: "none",
            renderItem: function (params, api) {
              let x0 = api.getWidth() / 2;
              let y0 = api.getHeight() / 2;
              let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85;
              let point = that.getCirlPoint(x0, y0, r, 90 + -that.angle);
              return {
                type: "circle",
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4,
                },
                style: {
                  stroke: that.colorSet.color, //粉
                  fill: that.colorSet.color,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: "ring5", //绿点
            type: "custom",
            coordinateSystem: "none",
            renderItem: function (params, api) {
              let x0 = api.getWidth() / 2;
              let y0 = api.getHeight() / 2;
              let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85;
              let point = that.getCirlPoint(x0, y0, r, 270 + -that.angle);
              return {
                type: "circle",
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4,
                },
                style: {
                  stroke: that.colorSet.color, //绿
                  fill: that.colorSet.color,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            type: "pie",
            radius: ["75%", "65%"],
            silent: true,
            clockwise: true,
            startAngle: 0,
            z: 0,
            zlevel: 0,
            label: {
              normal: {
                position: "center",
              },
            },
            data: [
              {
                value:  that.dataArr,
                name: "",
                itemStyle: {
                  normal: {
                    color: {
                      // 完成的圆环的颜色
                      colorStops: [
                        {
                          offset: 0,
                          color:  that.colorSet.color, // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: that.colorSet.color, // 100% 处的颜色
                        },
                      ],
                    },
                  },
                },
              },
              {
                value: that.max -  that.dataArr,
                name: "",
                label: {
                  normal: {
                    show: false,
                  },
                },
                itemStyle: {
                  normal: {
                    color: "#173164",
                  },
                },
              },
            ],
            
          },

          {
            name: "",
            type: "gauge",
            radius: "58%",
            center: ["50%", "50%"],
            startAngle: 0,
            endAngle: 359.9,
            splitNumber: 8,
            hoverAnimation: true,
            axisTick: {
              show: false,
            },
            splitLine: {
             show:false
            },
            axisLabel: {
              show: false,
            },
            pointer: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                opacity: 0,
              },
            },
            detail: {
              show: false,
            },
            data: [
              {
                value: 0,
                name: "",
              },
            ],
             animationDuration: 10000,
          },
        ],
      };
      that.chart.setOption(option);
    },
    getCirlPoint(x0, y0, r, angle) {
      let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
      let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
      return {
        x: x1,
        y: y1,
      };
    },
  },
};
</script>
<style scoped>
</style>